import React,{useEffect,useState} from 'react'
import { useNavigate } from 'react-router-dom';
import { useDispatch ,useSelector } from 'react-redux';
import axios from '../../Utile/requery';
import {SETLIST ,STORESUMTYPE ,TABINDEX} from '../../Type/Store.d';  
import '../../Api/DataList';   
import { Search ,Sticky ,Swiper ,Toast ,Grid ,Tabs ,Image } from 'react-vant';


function Index() {
    const Dispatch= useDispatch();
    const Navigate= useNavigate();

    const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac'];
    const items = colors.map((color, index) => (
        <Swiper.Item key={color}>
            <div
                onClick={() => {
                    Toast.info(`你点击了卡片 ${index + 1}`);
                }}
            >
            {index + 1}
            </div>
        </Swiper.Item>
    ));
    useEffect(()=>{
        axios.get('/list').then(res=>{
            Dispatch({
                type:SETLIST,
                payload:res.data.list
            })
        })
    },[])
  
    const list = useSelector((state:STORESUMTYPE) =>state.list);
    const childrenList = useSelector((state:STORESUMTYPE) =>state.childrenList)
    // console.log(list);
    
    const tabBtn = (e:number)=>{
        // console.log(e);
        Dispatch({
            type:TABINDEX,
            payload:e
        })
    }
    return (
        <div className='Index'>
            <Sticky>
            <Search
                shape="round"
                background="#4fc08d"
                placeholder="请输入搜索关键词"
            />
            </Sticky>
            <div className="demo-swiper">
                <Swiper autoplay={2000}>{items}</Swiper>
            </div>
            <main>
            <Tabs active={0} sticky swipeable onChange={(e:any)=>tabBtn(e)}>
                {list.map((item,index) => (
                    <Tabs.TabPane key={index} title={item.txt}>
                        <Grid columnNum={2}>
                            {
                                childrenList.map((v,i)=>{
                                    return  <Grid.Item  key={i} onClick={()=>Navigate('/Detail/'+v.id,{state:v})}>
                                        <Image width="100" height="100" src={v.src} />
                                        <p>{v.txt}</p>
                                    </Grid.Item>
                                })
                            }
                            
                        </Grid>
                    </Tabs.TabPane>
                ))}
            </Tabs>
            </main>
        </div>
    )
}

export default Index